<template>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">{{info.title}}</h4>
                </div>
                <div class="modal-body" >
                    <form v-if="info.key==1">
                        <div class="form-group" >
                            <label for="recipient-name" class="control-label">{{info.groupName}}:</label>
                            <input v-model='name' type="text" class="form-control" id="recipient-name" :placeholder="'请输入'+info.groupName">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">{{info.groupProfile}}:</label>
                            <textarea v-model='intro' class="form-control" id="message-text" :placeholder="'请输入群简介'+info.groupProfile"></textarea>
                        </div>
                    </form>
                    <div v-else-if="info.key==2">
                        <img src="../images/audio.png" alt="语音">
                        <p>正在呼叫{{info.name}}...</p>
                    </div>
                    <div v-else-if="info.key==3">
                        <img src="../images/video.png" alt="视频">
                        <p>正在呼叫{{info.name}}...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{info.close}}</button>
                    <button type="button" class="btn btn-primary" @click="info.callback({name:name,intro:intro}) ">{{info.confirm}}</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['info'],
    data(){
        return {
            name:"",
            intro:"",
            infos:this.info
        }
    },
    created(){
      console.log(this.infos)
    },
    methods:{
        // confirm:function(){
        //     this.info.callback(name)
        // }
    }
}
</script>
<style scoped>
    .modal-body img{
        width: 100%;
    }
    .modal-body p{
        bottom: 0;
        left: 50%;
        color: #fff;
        font-size: 20px;
        position: absolute;
        transform: translateX(-50%);
    }
    .modal-body>div{
        position: relative
    }
</style>


